<template>
  <div>
    <Tree :data="treeData" :render="renderContent"></Tree>
    <ModalContract
      :contractForm="contractForm"
      :contractFormType="contractFormType"
      v-model="contractModalVisible"
    />

    <ModalWork
      :nodeId="oprNodeId"
      v-model="workModalVisible"
    />
  </div>
</template>

<script>
import ModalContract from './contract-tree/modal-contract';
import ModalWork from './contract-tree/modal-work';
import {
  getContractTree,
  getContractDetail
} from '@/api/checkout.js';
import { NodeType } from '@/config/cfg';
export default {
  name: 'contract-tree',
  props: {
    showProcedureOpr: {
      type: Boolean,
      default: true
    }
  },
  components: {
    ModalContract,
    ModalWork
  },
  data () {
    return {
      treeData: [],
      selectNodeId: '',
      // 自定义树节点使用
      buttonProps: {
        type: 'default',
        size: 'small'
      },
      // --- 弹窗数据 ---
      // 施工合同段详情Modal
      contractModalVisible: false,
      contractForm: {
        name: '', // 施工合同段
        prefix: '', // 编码
        qqzh: '', // 起止桩号
        sgdw_name: '', // 施工单位
        jldw_name: '', // 监理单位

        levelName: '',
        levelType: '',
        fullcode: '',
        nodeName: '',
        sort: ''
      },
      contractFormType: 2,

      // 施工工序
      workModalVisible: false,
      oprNodeId: ''
    };
  },
  created () {
    this.getContractTree();
  },
  methods: {
    reset () {
      const handleTerrData = treeDate => {
        treeDate.forEach(node => {
          node.nodeClick = false;
          if (node.children) {
            handleTerrData(node.children);
          }
        });
      };
      handleTerrData(this.treeData);
    },
    async getContractTree () {
      // this.$Spin.show();
      try {
        const resp = await getContractTree();

        const treeData = resp.data.data;
        // 处理数据
        const handleTerrData = treeDate => {
          treeDate.forEach(node => {
            this.$set(node, 'nodeClick', false);
            // node.expand = true;
            if (node.children) {
              handleTerrData(node.children);
            }
          });
        };
        handleTerrData(treeData);
        this.treeData = treeData;
      } catch (error) {
        console.error(error);
      }
    },
    // 点击查看按钮，获取合同详细信息
    async getContractDetail (node) {
      try {
        this.contractFormType = node.node.nodeType;
        const data = {
          nodeId: node.node.nodeId,
          nodeType: this.contractFormType
        };
        const resp = await getContractDetail(data);
        const info = resp.data.data || {};

        if (this.contractFormType === NodeType.Construction) {
          this.contractForm.name = info.name;
          this.contractForm.prefix = info.prefix;
          this.contractForm.qqzh = info.qqzh;
          this.contractForm.sgdw_name = info.sgdw_name;
          this.contractForm.jldw_name = info.jldw_name;
        } else {
          this.contractForm.levelName = info.levelName;
          this.contractForm.levelType = info.levelType;
          this.contractForm.fullcode = info.fullcode;
          this.contractForm.nodeName = info.nodeName;
          this.contractForm.sort = info.sort;
        }

        // console.log('施工合同段详情 res=>', info);
      } catch (error) {
        console.error(error);
      }
    },
    // 根据当前项目树层级返回icon图标
    getLevelIcon (type) {
      const icons = [
        'icon-xingzhuangjiehe',
        'icon-hetong2',
        'icon-a-xingzhuangjiehe2',
        'icon-xingzhuangjiehebeifen',
        'icon-a-Fill12',
        'icon-a-Fill1beifen',
        'icon-a-Fill5',
        'icon-buwei',
        'icon-gongxu'
      ];
      return icons[type - 2];
    },
    renderContent (h, { root, node, data }) {
      return h(
        'span',
        {
          style: {
            display: 'inline-flex',
            width: '100%',
            justifyContent: 'space-between'
          },
          class:
            data.nodeClick === true ? 'tree-item  level-click' : 'tree-item '
        },
        [
          h(
            'span',
            {
              style: {
                display: 'inline-flex',
                lineHeight: '23px',
                cursor: 'pointer',
                whiteSpace: 'normal',
                alignItems: 'center'
              },
              class: 'tree-text',
              on: {
                click: () => {
                  for (let i = 0; i < root.length; i++) {
                    root[i].node.nodeClick = false;
                  }
                  data.nodeClick = true;
                  this.selectNodeId = data.nodeId;
                  this.$emit('onNodeClick', data.nodeId);
                }
              }
            },

            [
              h('Icon', {
                // props: {
                //   type: 'ios-paper-outline'
                // },
                class: `iconfont ${this.getLevelIcon(node.node.nodeType)}`,
                style: {
                  margin: '0 5px',
                  fontSize: '16px',
                  verticalAlign: 'middle'
                }
              }),
              h('span', {}, data.nodeName)
            ]
          ),

          h(
            'span',
            {
              style: {
                alignItems: 'center',
                marginRight: '30px'
              }
            },

            [
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  size: 'small',
                  type: 'text'
                }),
                style: {
                  color: 'rgb(90, 111, 206)',
                  padding: '2px 3px'
                },
                domProps: {
                  innerHTML: '查看'
                },
                on: {
                  click: async () => {
                    await this.getContractDetail(node);
                    this.contractModalVisible = true;
                  }
                }
              }),
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  size: 'small',
                  type: 'text'
                }),
                style: {
                  color: 'rgb(90, 111, 206)',
                  padding: '2px 3px',
                  display: this.showProcedureOpr ? 'inline-block' : 'none'
                },
                domProps: {
                  innerHTML: '工序'
                },
                on: {
                  click: () => {
                    this.oprNodeId = node.node.nodeId;
                    this.workModalVisible = true;
                  }
                }
              })
            ]
          )

        ]
      );
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .level-click {
.tree-text {
  padding: 0px 8px;
  background: rgb(90, 111, 206);
  border-radius: 3px;
  color: #fff !important;
}
}

/deep/ .tree-item {
.ivu-btn {
  visibility: hidden;
}
}

/deep/ .tree-item:hover {
.tree-text {
  color: rgb(90, 111, 206);
}

.ivu-btn {
  visibility: visible;
}
}

.table-button-group {
  margin-bottom: 10px;

.ivu-btn {
  float: right;
  margin-left: 10px;
}
}

/deep/ .ivu-tree-arrow i {
  margin-bottom: 8px
}
</style>
